<template>
  <div class="subject-add">
    <div class="title">
      <div class="block"></div>
      <div class="word">添加专业信息</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="subject-add-content">
      <div class="form">
        <div class="list">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <div class="topbox">
              <div class="tipsbox">
                <img class="tips" src="@/assets/index/school/box.svg" alt="" />
                <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
                <span>基本信息</span>
              </div>
              <el-form-item label="专业中文名称:" prop="majorCName">
                <el-input v-model="ruleForm.majorCName"></el-input>
              </el-form-item>

              <el-form-item label="专业英文名称:" prop="majorEName">
                <el-input v-model="ruleForm.majorEName"></el-input>
              </el-form-item>

              <el-form-item label="所属学校:" prop="selectSchool">
                <div @click="dialog2Visible = true">
                  <el-input
                    v-model="school"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
                <el-dialog
                  title="关联学校"
                  :visible.sync="dialog2Visible"
                  width="40%"
                  @close="closeFun()"
                >
                  <div>
                    <el-form
                      style="width: 500px"
                      :inline="true"
                      label-width="100px"
                    >
                      <el-form-item class="el-form-item" label="请选择学校:">
                        <el-input
                          class="el-input"
                          v-model.trim="formInline_school.name"
                          placeholder="编号/学校名称"
                          clearable
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="">
                        <el-button @click="getSearchSchoolList">搜索</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div style="margin-left: 20px; margin-top: 20px">
                    <el-table
                      class="el-table"
                      ref="multipleTable"
                      :data="schoolData"
                      @select="select"
                      @select-all="selectAll"
                      border
                      style="width: 100%"
                    >
                      <el-table-column type="selection"></el-table-column>
                      <el-table-column prop="schoolId" label="学校编号">
                      </el-table-column>
                      <el-table-column prop="schoolCName" label="学校中文名称">
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="bottom">
                    <paging
                      class="paging"
                      :total="school_total"
                      @size="size"
                      @currentpage="currentpage"
                    ></paging>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialog2Visible = false">取 消</el-button>
                    <el-button type="primary" @click="commitSchool"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </el-form-item>

              <el-form-item label="学制(年):" prop="educationalSystem">
                <el-input v-model="ruleForm.educationalSystem"></el-input>
              </el-form-item>

              <el-form-item label="国际生比例:" prop="proportion">
                <el-input v-model="ruleForm.proportion"></el-input>
              </el-form-item>

              <el-form-item label="费用(英镑):" prop="tuition">
                <el-input v-model="ruleForm.tuition"></el-input>
              </el-form-item>
            </div>

            <div class="midbox">
              <div class="tipsbox">
                <img class="tips" src="@/assets/index/school/box.svg" alt="" />
                <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
                <span>申请要求</span>
              </div>
              <el-form-item
                label-width="150px"
                :label="'核心课程'"
                :rules="{
                  required: true,
                  message: '课程名不能为空',
                  trigger: 'blur',
                }"
              >
                <div
                  class="addOrDeleteSubject"
                  v-for="(subject, index) in dynamicValidateForm.subject"
                  :key="index"
                >
                  <el-input class="input" v-model="subject.core"></el-input>
                  <el-button @click.prevent="removeSubject(subject)"
                    >删除</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item>
                <el-button @click="addSubject">添加</el-button>
              </el-form-item>
            </div>

            <div class="bottombox">
              <div class="tipsbox">
                <img class="tips" src="@/assets/index/school/box.svg" alt="" />
                <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
                <span>录取标准</span>
              </div>
              <quill-editor
                class="quill-editor"
                ref="quillEditor"
                v-model="content"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)"
              ></quill-editor>
            </div>

            <div class="bottombox">
              <!-- <div class="tipsbox">
                <img class="tips" src="@/assets/index/school/box.svg" alt="" />
                <img class="logo" src="@/assets/index/school/logo.svg" alt="" />
                <span>可申请学校信息</span>
              </div>
              <div class="major_box">
                <el-table
                  class="el-table"
                  ref="multipleTable"
                  :data="tableData"
                  border
                  style="width: 100%"
                >
                  <el-table-column type="selection"></el-table-column>
                  <el-table-column prop="schoolId" label="编号">
                  </el-table-column>
                  <el-table-column prop="school" label="学校名称">
                  </el-table-column>
                  <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="goDelete(scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div>
                <el-button class="add_button" @click="add">添加</el-button>

                <el-dialog
                  title="关联学校"
                  :visible.sync="dialog1Visible"
                  width="40%"
                  @close="closeFun()"
                >
                  <div>
                    <el-form :inline="true" label-width="60px">
                      <el-form-item class="el-form-item" label="请输入:">
                        <el-input
                          class="el-input"
                          v-model.trim="formInline.id"
                          placeholder="编号/学校名称"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="">
                        <el-button @click="getSearchList">搜索</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div style="margin-left: 20px">
                    <el-table
                      class="el-table"
                      ref="multipleTable"
                      :data="tableData"
                      border
                      style="width: 100%"
                    >
                      <el-table-column type="selection"></el-table-column>
                      <el-table-column prop="schoolId" label="编号">
                      </el-table-column>
                      <el-table-column prop="school" label="学校名称">
                      </el-table-column>
                    </el-table>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialog1Visible = false">取 消</el-button>
                    <el-button type="primary" @click="dialog1Visible = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </div> -->
            </div>
          </el-form>
        </div>
        <div class="buttonbox">
          <el-button class="cancel" @click="cancel">取消</el-button>
          <el-button class="save" @click="save">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addQuillTitle } from "@/utils/quill-title.js";
import {
  getSubjectInfo,
  getAllSubject,
  addSubjectInfo,
  getSchoolList,
} from "../../../api";
import paging from "../../../component/paging/paging.vue";
import qs from "qs";

export default {
  inject: ["reload"],
  name: "subjectAdd",
  components: {
    paging, //分页组件
  },
  data() {
    return {
      current: "",
      pagesize: "",
      school_total: 0, //学校列表多少条数据
      school: "", //所属学校
      total: 0, //一共多少条数据
      content: "",
      standard: "", //录取标准
      dialog1Visible: false,
      dialog2Visible: false,
      schoolData: [],
      tableData: [],
      formInline: {
        id: "",
      },
      formInline_school: {
        name: "",
      },
      ruleForm: {
        majorCName: "",
        majorEName: "",
        school: "",
        tuition: "",
        proportion: "",
        educationalSystem: "",
        dialogImageUrl: "",
        dialogVisible: false,
      },
      rules: {
        majorCName: [
          { required: true, message: "请输入专业中文名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        majorEName: [
          { required: true, message: "请输入专业英文名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        selectSchool: [
          { required: true, message: "请选择学校", trigger: "blur" },
        ],
        tuition: [
          { required: true, message: "请输入费用", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        proportion: [
          { required: true, message: "请输入比例", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        educationalSystem: [
          { required: true, message: "请输入学年", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        school: [{ required: true, message: "请选择学校", trigger: "blur" }],
      },
      dynamicValidateForm: {
        subject: [
          {
            core: "英语",
          },
          {
            core: "数学",
          },
        ],
      },
      options: [
        {
          value: "选项1",
          label: "北师珠",
        },
        {
          value: "选项2",
          label: "北理工",
        },
        {
          value: "选项3",
          label: "吉珠",
        },
        {
          value: "选项4",
          label: "广工",
        },
        {
          value: "选项5",
          label: "广大",
        },
      ],
    };
  },

  mounted() {
    this.$emit("routeName", "subjectAdd");
    addQuillTitle();
    this.getList();
  },

  methods: {
    getList() {
      getAllSubject(this.current, this.pagesize).then((data) => {
        // console.log(data.data);
        this.tableData = data.data.records;
        this.total = data.data.total;
        // console.log(data);
      });
      getSchoolList(
        this.formInline_school.name,
        this.current,
        this.pagesize
      ).then((data) => {
        console.log(data.data);
        this.schoolData = data.data.schoolList;
        this.school_total = data.data.total;
        // console.log(data);
      });
    },
    getSearchSchoolList() {
      this.current = "";
      this.pagesize = "";
      this.getList();
    },
    commitSchool() {
      this.dialog2Visible = false;
      this.school = this.$refs.multipleTable.selection[0].schoolCName;
    },
    select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1;
      }
    },
    currentpage(val) {
      // console.log(val);
      this.current = val; //得到新的当前页
      this.getList(); //获取新的数据列表
    },
    size(val) {
      // console.log(val);
      this.pagesize = val; //得到新当前页的一共几行数据
      this.getList(); //获取新的数据列表
    },
    removeSubject(item) {
      var index = this.dynamicValidateForm.subject.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.subject.splice(index, 1);
      }
    },
    addSubject() {
      this.dynamicValidateForm.subject.push({});
    },

    closeFun() {
      //重置form表单
      // this.getList();
      // this.formInline = {}
      // this.$refs['formInline_skill'].resetFields();
      // this.$refs['multipleTable'].clearSelection();
    },
    refresh() {
      this.reload();
    },
    cancel() {},
    save() {
      let core = [];
      for (let i = 0; i < this.dynamicValidateForm.subject.length; i++) {
        core.push(this.dynamicValidateForm.subject[i].core);
      }
      let data = qs.stringify({
        aaa: "",
        core: core,
        educationalSystem: this.ruleForm.educationalSystem,
        majorCName: this.ruleForm.majorCName,
        majorEName: this.ruleForm.majorEName,
        proportion: this.ruleForm.proportion,
        school: "牛津大学",
        standard: this.standard,
        tuition: this.ruleForm.tuition,
        bbb: "",
      });
      addSubjectInfo(data).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加专业信息成功",
            type: "success",
          });
        } else {
          this.$message.error("添加专业信息失败");
        }
        console.log(res);
      });
    },
    onEditorFocus(val, editor) {
      // 富文本获得焦点时的事件
      // console.log(val); // 富文本获得焦点时的内容
      // editor.enable(false); // 在获取焦点的时候禁用
    },
    onEditorBlur(val) {
      // 富文本失去焦点时的事件
      // console.log(val); // 富文本失去焦点时的内容
      // console.log(val.root.innerText);
      this.standard = val.root.innerText;
    },
    onEditorChange(val) {
      // 富文本内容改变时的事件
      // console.log(val.quill.root.innerText); // 富文本改变时的内容
      this.standard = val.quill.root.innerText;
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.add_button {
  margin-top: 20px;
}
.major_box {
  width: 600px;
}
.subject-add-content {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  width: 80%;
  margin-left: 10%;
}

.form {
  width: 80%;
  margin-left: 10%;
  background-color: #fff;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-bottom: 150px;
}
.bottom {
  text-align: center;
  margin-top: 20px;
}
.el-form {
  width: 400px;
  margin-left: 15%;
  /* transform: translateX(-70%); */
}

.topbox,
.midbox,
.bottombox {
  position: relative;
}

.bottombox {
  height: 500px;
}

.tipsbox {
  position: relative;
}

.tipsbox .tips {
  position: absolute;
  left: -300px;
  top: 20px;
}

.tipsbox .logo {
  position: absolute;
  left: -280px;
  top: 38px;
}

.tipsbox span {
  position: absolute;
  font-weight: 700;
  color: #fff;
  left: -255px;
  top: 36px;
}

.quill-editor {
  width: 600px;
  height: 300px;
  margin-left: 10%;
}

.buttonbox {
  display: flex;
  margin-left: 50%;
  transform: translateX(-30%);
}

.addOrDeleteSubject {
  display: flex;
  margin-bottom: 10px;
}

.input {
  margin-right: 20px;
}

.cancel {
  width: 200px;
  border: 1px solid #44c8ae;
  color: #44c8ae;
  font-size: 16px;
}
.save {
  width: 200px;
  font-size: 16px;
  margin-left: 50px;
  border: 1px solid #1abc9c;
  background-color: #1abc9c;
  color: #fff;
}
</style>
